<template>
  <i-biz-form-item-container
    :class="[
      ns.b(),
      ns.m(modelData.id),
      ns.is('disabled', c.state.disabled),
      ns.is('readonly', c.model.editor?.readOnly),
    ]"
    :required="c.state.required"
    :error="c.state.error"
    :label="captionText"
    :labelPos="c.model.labelPos"
    :labelWidth="c.model.labelWidth"
    @click="onClick"
  >
    <i-biz-editor-shell
      v-if="c.form.state.isLoaded && !!c.editor"
      :value="c.value"
      :data="c.data"
      :controller="c.editor"
      :disabled="!!c.state?.disabled"
      :readonly="!!c.model.editor!.readOnly"
      :onChange="onValueChange"
      :controlParams="
        editMode
          ? { ...c.form.controlParams, editmode: editMode }
          : c.form.controlParams
      "
      :onFocus="(event: MouseEvent) => c.onFocus(event)"
      :onBlur="(event: MouseEvent) => c.onBlur(event)"
      :onEnter="(event: MouseEvent) => c.onEnter(event)"
      :onClick="(event: MouseEvent, params: IData) => c.onClick(event, params)"
      v-bind="attrs"
    ></i-biz-editor-shell>
  </i-biz-form-item-container>
</template>
<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: "shared"
  }
}
</script>
<script setup lang="ts">
import { computed, PropType, watch } from "vue";
import { FormItemController } from "@ibiz-template/runtime";
import { IDEFormItem } from "@ibiz/model-core";
import { useNamespace } from "@/use";

const props = defineProps({
  modelData: {
    type: Object as PropType<IDEFormItem>,
    required: true,
  },
  controller: {
    type: Object as PropType<FormItemController>,
    required: true,
  },
  attrs: {
    type: Object as PropType<IData>,
    required: false,
  },
});
const c = props.controller;
const { captionItemName, caption } = props.modelData;
const captionText = computed(() => {
  if (captionItemName && props.controller.data) {
    return props.controller.data[captionItemName.toLowerCase()];
  }
  return caption;
});

const ns = useNamespace("form-item");
const editMode = c.editor?.model?.editorParams?.editMode;
const onClick = (event: MouseEvent) => {
  c.onClick(event);
};
const onValueChange = (value: unknown, name?: string) => {
  props.controller.setDataValue(value, name);
};
</script>
<style lang="scss">
@include b(form-item) {
  $-label-color: getCssVar(color, text, 0);
  $-text-color: getCssVar(color, text, 0);
  $-bg-color: getCssVar(color, fill, 0);
  $-hover-color: getCssVar(color, text, 0);
  $-hover-bg-color: getCssVar(color, fill, 1);
  $-readonly-color: getCssVar(color, text, 2);
  $-border-color: transparent;
  $-font-size: getCssVar(font-size, header-6);
  $-error-font-size: getCssVar(font-size, regular);
  $-error-color: getCssVar(color, danger);
  $-placeholder-color: getCssVar(color, text, 3);
  $-disabled-color: getCssVar(color, text, 3);
  $-disabled-bg-color: transparent;
  $-disabled-border-color: getCssVar(color, disabled, border);
  $-active-bg: getCssVar(color, fill, 2);
  $-active-border: getCssVar(active, bg);
  $-focus-bg: getCssVar(color, fill, 0);
  $-focus-border: getCssVar(color, focus, border);
  $-line-height: rem(20px);
}
</style>
